<template>
  <div :class="['home', { homeEn: $store.state.locale === 'en' }]">
    <Header v-show="!$store.state.isConcentration || !isWorkbench"></Header>
    <HeadMenus v-show="!$store.state.isConcentration || !isWorkbench"></HeadMenus>
    <router-view></router-view>
    <Footer v-show="!$store.state.isConcentration || !isWorkbench"></Footer>
    <AlertBox v-show="!isWorkbench"></AlertBox>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';

import Header from '@/components/Header';
import AlertBox from '@/components/AlertBox';
import HeadMenus from '@/components/HeadMenus';
import Footer from '@/components/Footer';
import * as Cookies from 'js-cookie';
@Component({
  components: {
    Header,
    HeadMenus,
    Footer,
    AlertBox,
  },
})
export default class Home extends Vue {
  get isWorkbench() {
    return ['/overview/detail', '/workbench'].includes(this.$route.path);
  }
  mounted() {
    // this.initPage();
  }

  @Watch('$route', { deep: true })
  async onChangeRoute(to: any, from: any) {}
}
</script>

<style lang="less" scoped>
@import './index.less';
.header {
  background-color: #246bdd;
}
</style>
